<template>
  <!-- 商品-商品参数 -->
  <!-- 商品-商品评论 -->
  <div class="article-manager">
    <el-col :span="24" class="ContCol2">
      <el-row>
        <el-col :span="24" class="tabsBox">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="京东自营" name="1"></el-tab-pane>
            <el-tab-pane label="平台自营" name="5"></el-tab-pane>
            <el-tab-pane label="优选商品" name="6"></el-tab-pane>
            <el-tab-pane label="精选商品" name="7"></el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="TopCol">
          <el-form label-position="right" label-width="100px" :model="data"   >
          <el-row>
            <el-col :span="4">
              <el-form-item label="商品编号:" class="noenBottom">
                <el-input v-model="data.skuNo" placeholder="请输入商品编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="商品名称:" class="noenBottom">
                <el-input v-model="data.name" placeholder="请输入商品名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="text-align: center;">
              <el-form-item label="品牌名称：" class="noenBottom">
                <el-input v-model="data.brandName" placeholder="请输入品牌名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="text-align: center;">
              <el-form-item label="最大市场价：" class="noenBottom">
                <el-input type="number" v-model="data.marketPriceMax" placeholder="请输入最大市场价"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="text-align: center;">
              <el-form-item label="最小市场价：" class="noenBottom">
                <el-input type="number" v-model="data.marketPriceMin" placeholder="请输入最小市场价"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px;">

            <el-col :span="4" style="text-align: center;">
              <el-form-item label="最大供应价：" class="noenBottom">
                <el-input type="number" v-model="data.sellPriceMax" placeholder="请输入最大供应价"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="text-align: center;">
              <el-form-item label="最小供应价：" class="noenBottom">
                <el-input type="number" v-model="data.sellPriceMin" placeholder="请输入最小供应价"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="text-align: center;">
              <el-form-item label="同步状态：" >
                <el-select v-model="data.is_sync"  placeholder="请选择">
    <el-option
      v-for="item in syncList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item  class="noenBottom">
                <el-button type="primary" @click="queryFn"  size="medium">搜索</el-button>
                <el-button  @click="resetFn"  size="medium">重置</el-button>
                <el-button type="primary" @click="ALLset" plain size="medium"
            :disabled="checkUidList.length === 0">批量同步</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="TopCol">
        </el-col>
          </el-row>
        </el-form>
        </el-col>
      </el-row>
      <el-table   ref="table" v-loading="loading" :data="tabList" tooltip-effect="light" @selection-change="handleSelectionChange"  
        :header-cell-style="{ background: '#e6f7ff' }">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="brandName" label="品牌名称" align="center" min-width="150">
        </el-table-column>
        <el-table-column prop="name" label="商品名称" align="center" min-width="180" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="skuNo" label="商品编号" align="center" show-overflow-tooltip min-width="170">
        </el-table-column>
        <el-table-column prop="mainImgUrl" label="商品主图" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.mainImgUrl" alt="" style="width: 70px;" @click="openImg(scope.row.mainImgUrl)"
              v-if="scope.row.mainImgUrl">
            <span v-else>暂无</span>
          </template>
        </el-table-column>
        <el-table-column prop="marketPrice" label="市场价格" align="center" />
        <el-table-column prop="sellPrice" label="供应商价" align="center" />
        <el-table-column prop="status" label="上架状态" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status == 10" size="small">上架</el-tag>
            <el-tag type="danger" size="small" v-else>上架</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="stockStatus" label="库存状态  " align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.stockStatus == 10" size="small">有库存</el-tag>
            <el-tag type="danger" size="small" v-else>无库存</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="valid" label="状态 " align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.valid == 1" size="small">有效</el-tag>
            <el-tag type="danger" size="small" v-else>无效</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="valid" label="同步 " align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.is_sync == 1" size="small">已同步</el-tag>
            <el-tag type="danger" size="small" v-else>未同步</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="120" align="center">
          <template slot-scope="scope">
            <el-button @click="handleDetail(scope.row)" type="text" size="small">查看</el-button>
            <Divider type="vertical" v-if="!scope.row.is_sync" />
            <el-button type="text" size="small" v-if="!scope.row.is_sync"
              @click="gotoAddpage(scope.row.skuNo)">同步</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24" class="TopCol">
          <div style="text-align: right;">
            <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page.sync="data.page"
          :page-size="10"
          layout="total, prev, pager, next"
           :total="total">
    </el-pagination>
          </div>
        </el-col>
      </el-row>
      <el-drawer title="商品详情" :visible.sync="drawer" direction="rtl" size="30%" :before-close="handleCloseDrawer" >
        <div style="padding-left: 20px;">
          <el-form label-position="left" label-width="100px" :model="DetailGoods">
          <el-row>
            <el-col :span="24">
              <el-form-item label="品牌名称:" class="noenBottom">
                <span>{{ DetailGoods.brandName ? DetailGoods.brandName : '暂无' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="商品名称：" class="noenBottom">
                <span>{{ DetailGoods.name ? DetailGoods.name : '暂无' }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="市场价格：">
                <span>{{ DetailGoods.marketPrice ? DetailGoods.marketPrice : '暂无' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="零售价格：">
                <span>{{ DetailGoods.sellPrice ? DetailGoods.sellPrice : '暂无' }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="商品描述：">
                <span>{{ DetailGoods.noReasonToReturnDesc ? DetailGoods.noReasonToReturnDesc : '暂无' }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="商品单位：">
                <span>{{ DetailGoods.saleUnit ? DetailGoods.saleUnit : '暂无' }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="商品配套：">
                <span>{{ DetailGoods.packingDesc ? DetailGoods.packingDesc : '暂无' }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="商品主图：">
                <img :src="DetailGoods.mainImgUrl" alt="" style="width: 100px;" v-if="DetailGoods.mainImgUrl"
                  @click="openImg(DetailGoods.mainImgUrl)">
                <span v-else>暂无</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="ifam" v-if="DetailGoods.contentDetail">
                <div class="content" v-html="DetailGoods.contentDetail"></div>
              </div>
              <div v-else>
                暂无
              </div>
            </el-col>
          </el-row>
        </el-form>
        </div>
      </el-drawer>
      <el-dialog :visible.sync="imgVisible" width="40%">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <!-- <el-dialog title="商品信息" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
          <el-form label-position="left" label-width="100px" :model="FormDetail">
  <el-form-item label="111">
    <el-input v-model="FormDetail.name"></el-input>
  </el-form-item>
  <el-form-item label="2">
    <el-input v-model="FormDetail.region"></el-input>
  </el-form-item>
  <el-form-item label="333">
    <el-input v-model="FormDetail.type"></el-input>
  </el-form-item>
</el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog> -->
    </el-col>
    </el-row>
    <el-dialog
  title="批量同步商品"
  :visible.sync="setShow"
  width="30%"
  :before-close="setShowClose">
  <el-form ref="form" :model="setform" label-width="140px"  width="50%">
  <el-form-item label="商品分类：" prop="cate_id">
    <el-cascader
          class="content_width"
                v-model="setform.cate_id"
                size="small"
                :options="treeSelect"
                :props="{ multiple: true, checkStrictly: true, emitPath: false }"
                clearable
              ></el-cascader>
      </el-form-item>
      <el-form-item label="库存：" prop="stock">
        <el-input style="width: 100px;"   v-model="setform.stock" placeholder="请输入内容" type="number"></el-input>
      </el-form-item>
      <el-form-item label="是否在APP显示" prop="app_show">
        <el-switch
  v-model="setform.app_show"
  active-color="#13ce66"
  :active-value="1"
  :inactive-value="0"
 >
</el-switch>
      </el-form-item>
      <el-form-item label="是否在H5显示" prop="h5_show">
         <el-switch
  v-model="setform.h5_show"
  active-color="#13ce66"
  :active-value="1"
  :inactive-value="0"
  >
</el-switch>
      </el-form-item>
      <el-form-item label="是否在小程序显示:" prop="routine_show">
        <el-switch
  v-model="setform.routine_show"
  active-color="#13ce66"
  :active-value="1"
  :inactive-value="0"
 >
</el-switch>
      </el-form-item>
      <el-form-item label="价格设置:" prop="price_up">
        <el-radio-group v-model="setform.price_up">
          <el-radio label="1">上浮</el-radio>
      <el-radio  label="0">下浮</el-radio>
  </el-radio-group>
      </el-form-item>
      <el-form-item label="价格百分比:" prop="welfare_price_set">
        <el-input type="number" style="width: 100px;"  v-model="setform.welfare_price_set"  min="0" max="100"  placeholder="请输入价格占比"></el-input>
      </el-form-item>
 </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="setShow = false">取 消</el-button>
    <el-button type="primary" @click="handleSync">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>
<script>
import {cascaderListApi} from "@/api/product";
import { GoodsListApi, GoodsDetailApi, GoodsDetailApi2,batchImportApi } from "@/api/goodsShow";
export default {
  name: "goodsShow",
  data() {
    return {
      syncList: [{
          value: '',
          label: '全部'
        }, {
          value: '1',
          label: '已同步'
        }, {
          value: '0',
          label: '未同步'
        }],
      //控制弹框
      setShow:false,
      //表单
      setform:{
        cate_id:[],
        stock:999,
        price_up:"1",
        welfare_price_set:0,
        app_show:0,
        h5_show:0,
        routine_show:0
      },
      // 分类的数组
      treeSelect: [],
      //多选的数组
      checkUidList: [],
      //图片弹出框
      dialogVisible: false,
      dialogImageUrl: "",
      drawer: false,
      loading: true,
      data: {
        type: 1,
        page: 1,
        limit: 10,
        is_sync:"",//商品同步
        skuNo:"",//商品编号
        brandName:"",//品牌名
        name:"",
        marketPriceMax:"",
       marketPriceMin:"",
        sellPriceMax:"",
       sellPriceMin:"",
      },
      imgVisible: false,
      tabList: [],
      total:"",
      //下一页按钮的状态
      ButtonFlag: false,
      //点击tab切换
      activeName: "1",
      DetailGoods: {}
    }
  },
  computed: {

  },
  created() {
    this.GetListFn();
    this.goodsCategory()
  },
  methods: {
    queryFn(){
       this.data.page=1;
       this.GetListFn();
    },
    resetFn(){
        this.page=1;
        this.data.limit=10;
        this.data.skuNo="",
        this.data.keyword="",
        this.data.is_sync="",
        this.data.name="",
        this.data.marketPriceMax="",
        this.data.marketPriceMin="",
        this.data.sellPriceMax="",
        this.data.sellPriceMin="",
        this.GetListFn();
    },
    handleSizeChange(val) {
        this.data.limit=val;
        this.GetListFn();
      },
      handleCurrentChange(val) {
        this.data.page=val;
        this.GetListFn();
      },
    //弹框里的确定方法
    handleSync(){
      let skuList=this.checkUidList.map(item=> item.skuNo);
      this.setform.skuList=skuList;
      batchImportApi(this.setform).then(res=>{
        if(res.status == 200){
          this.$Message.success(res.msg);
          this.setShow=false;
          this.GetListFn();
          this.setShowClose();
          this.$refs.table.clearSelection();
        }
      }).catch(err=>{
        this.$Message.error(err.msg);
      })
    },
    // 商品分类；
    goodsCategory() {
      cascaderListApi(1)
        .then((res) => {
          
          this.treeSelect = res.data;
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
    //点击表格的单选框
    handleSelectionChange(val) {
      this.checkUidList = val.map(element => {
        return{
          skuNo:element.skuNo
        }
      });;
    },
    //点击批量同步按钮
    ALLset() {

    this.setShow=true;
    
    },
    //点击取消按钮
    setShowClose(){
      this.setShow=false;
      this.setform.cate_id=[];
      this.setform.stock=999;
      this.setform.skuList=[];
      this.setform.app_show=0;
      this.setform.h5_show=0;
      this.setform.routine_show=0;
      this.setform.price_up="1";
      this.setform.welfare_price_set=0;
      this.checkUidList=[];
    },
    async gotoAddpage(sku) {
      let res = await GoodsDetailApi2(sku)
      console.log(res);
      if (res.status == 200) {
        this.$router.push({ path: "/admin/product/add_product", query: { sku } })
      }
    },
    //点击放大图片的方法
    openImg(src) {
      if (src) {
        this.dialogImageUrl = src
        this.imgVisible = true;
      } else {
        this.dialogImageUrl = ""
      }

    },
    //抽屉关闭的方法
    handleCloseDrawer() {
      this.drawer = false;
    },
    //tab点击的方法
    handleClick() {
      if (this.activeName == this.data.type) {
        return false
      }
      // this.ButtonFlag = false
      this.data.page = 1;
      this.data.type = this.activeName;
      this.tabList = [],
      this.loading = true;
      //重新调用
      this.GetListFn()
    },
    //弹框关闭触发的方法
    // handleClose() {
    //   this.dialogVisible = false
    // },
    async handleDetail(item) {
      let id = item.skuNo
      // this.drawer = true
      let res = await GoodsDetailApi(id)
      if (res.status == 200) {
        this.DetailGoods = res.data;
        this.drawer = true
        console.log(this.DetailGoods);
      }
    },
    async GetListFn() {
      this.loading = true;
      let params = this.data;
      try {
        let res = await GoodsListApi(params)
        if (res.status == 200) {
          this.total=res.data.count
          this.tabList = res.data.list
          this.loading = false;
        }
      } catch (err) {
        this.loading = false;
        console.log(err);
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.TopCol ,.ContCol2{
    padding: 20px ;
  background-color: #fff; 
  border-radius: 10px; 
}
.ContCol2{
margin-top: 20px
}
.tabsBox {
  margin-bottom: 10px
  /deep/ .el-tabs__item {
    font-size: 16px !important
  }

}
.noenBottom{
  margin-bottom:0 !important
}
/deep/ .el-drawer__body {
  overflow: auto;
}
/deep/ .el-drawer__container ::-webkit-scrollbar{
  display: none;
}
.el-form-item__content{
  line-height :20px;
}
.ifam {
  width: 344px;
  height: 644px;
  background: url('../../../assets/images/phonebg.png') no-repeat center top;
  background-size: 344px 644px;
  padding: 40px 20px;
  padding-top: 50px;
  margin: 0 auto 0 20px;
    .content {
    height: 560px;
    overflow: hidden;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: auto;
    overflow-y: auto;
  }

  .content::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
</style>